/**
* 分页组件
*/ 
<template>
  <div>
    <!-- 列表 -->
    <el-table
      element-loading-text="数据正在加载..."
      v-loading="loading"
      :data="dataList"
      :stripe="stripe"
      :border="border"
      :fit="true"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <slot name="item"></slot>
    </el-table>
    <!-- 分页 -->
    <div
      class="block"
      style="margin-top: 15px;margin-bottom: 15px;text-align:right;margin-right:15px;"
    >
      <el-pagination v-if="pageshow"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "Pagination",
  //子组件访问父组件数据的唯一接口
  props: {
    mAction: { type: String }, //action请求
    mParams: { type: String }, //查询参数
    stripe: { type: Boolean, default: true }, //是否带斑马表格
    border: { type: Boolean, required: false }, //是否带边框线
  },
  data() {
    return {
      small: {
        //是否使用小型分页样式
        required: false, //是否必须
        type: Boolean, //类型
        default: false, //默认值
      },
      pageshow: true,
      dataList: [], //数据
      currentPage: 1, //当前第几页
      pageSizes: [10, 20, 40, 80], //当前页条数下拉
      pageSize: 10, //当前页面条数FZ
      total: 0, //当前列表共多少条数
      loading: true, //加载
    };
  },
  components: {},
  //监听方法
  watch: {
    mParams() {
      this.requestData(0);
    },
    //监听页数变化
    currentPage() {
      // 分页组件监听当前页
      this.$emit("func", this.currentPage);
    },
  },
  //组件初始化时执行
  created() {},
  //组件初始化完成后执行
  mounted() {
    this.requestData(4);
  },
  //方法
  methods: {
    //列表多选
    handleSelectionChange(val) {
      // console.log("列表多选");
      // console.log(val);
      this.$emit("selection", val);
    },
    //选择页面条数
    handleSizeChange(val) {
      // console.log("选择页面条数"+val);
      this.pageSize = val;
      this.requestData(1);
    },
    //监听当前多少页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.requestData(3);
      // }
    },
    //请求获取参数
    requestData(type) {
      this.loading = true;
      let data = JSON.parse(this.mParams);
      // 分别区分是否是刷新页面，是否是修改页面不改变当前页和组件点击事件
      if (type == 3) {
        data.page = this.currentPage;
        this.currentPage = data.page;
      } else if (type == 4) {
        if (data.page) {
          this.currentPage = data.page;
        } else {
          data.page = this.currentPage;
        }
        this.pageshow = false; //让分页隐藏
        this.$nextTick(() => {
          //重新渲染分页
          this.pageshow = true;
        });
      } else {
        data.page = this.currentPage;
      }
      data.size = this.pageSize;
      let tData = {
        action: this.mAction,
        headers: this.abdpConfig.getApiJson(),
        data: data,
      };
      this.abdpAjax.http(tData).then((rsp) => {
        // console.log("获取数据列表")
        if (rsp.data.code == 200) {
          this.total = rsp.data.data.total; //获取数据总条数
          this.dataList = rsp.data.data.records;
        } else {
          this.$message.error(rsp.data.msg);
        }
        this.loading = false;
      });
    },
  },
};
</script>

<style>
.el-table .warning-row {
  background: red;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
